/*
 * @Description: 其余知识
 * @Author: Zhanghan
 * @Date: 2025-03-04 11:19:14
 * @LastEditTime: 2025-05-15 17:51:45
 * @LastEditors: ZhangHan
 */
import type { RadioChangeEvent } from "antd";
import React, { useState, useRef } from "react";
import { apple, pear, orange } from "./fun";
import { Radio, Button, Checkbox } from "antd";
import type { CheckboxGroupProps } from "antd/es/checkbox";
import MyChild from "./components/MyChild";
import "./index.less";

function Another() {
  const childRef = useRef(null);
  const [value, setValue] = useState("Apple");
  const [value2, setValue2] = useState(["Apple"]);
  const [num, setNum] = useState(0);
  const options: CheckboxGroupProps<string>["options"] = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ];

  const onChange = ({ target: { value } }: RadioChangeEvent) => {
    console.log("radio3 checked", value);
    setValue(value);
  };

  //判断奇数偶数
  const isEven = (num: number) => {
    return num % 2 === 0;
  };

  //数字增加
  const addNum = () => {
    setNum(num + 1);
  };

  const handleClick = () => {
    if (childRef.current) {
      //   console.log(childRef.current.getValue()); // 访问子组件的值
      childRef.current.someMethod(); // 111111111调用子组件的方法
    }
  };

  const onChange2 = (checkedValue: string[]) => {
    console.log("checkbox2 checked", checkedValue);
    setValue2(checkedValue);
  };

  //渲染函数
  const renderContent = () => {
    switch (value) {
      case "Apple":
        return apple.map((item, index) => (
          <div
            className={`item mb-1 ${item.flag ? "select" : ""} `}
            key={index}
          >
            {item.name}
          </div>
        ));
      case "Pear":
        return pear.map((item) => <div className="item mb-1">{item.name}</div>);
      case "Orange":
        return orange.map((item) => (
          <div className="item mb-1">{item.name}</div>
        ));
      default:
        return <div></div>;
    }
  };

  return (
    <>
      <div className="w-full h-full">
        <h1 className="mb-2 font-bold text-center">条件渲染</h1>
        <div className="flex flex-col justify-center items-center">
          <Radio.Group
            options={options}
            onChange={onChange}
            value={value}
            optionType="button"
            className="mb-2 mt-2"
          />
          {renderContent()}
        </div>
        <div className="mb-2 font-bold text-center mt-2 text-1xl">
          奇数偶数if判读--{num}
        </div>
        <Button onClick={() => addNum()}>点击增加</Button>
        <div className="mt-1 mb-2">{isEven(num) ? "偶数" : "奇数"}</div>
        <div>useForwardRef结合useImperativeHandle</div>
        <MyChild ref={childRef} title={"测试名称"} />
        <button onClick={handleClick}>Access Child</button>
        <div></div>
        <Checkbox.Group
          options={options}
          onChange={onChange2}
          value={value2}
          className="mb-2 mt-2"
          style={{ display: "grid", gap: "10px" }}
        />
      </div>
    </>
  );
}

export default Another;
